<div class="form-group">
    <label <if condition="$item['extra']['required']">class="required"</if>>{$item.title}</label>
    <div>
        <input type="hidden" name="{$item.name}" id="imagebox" value="{$item.value}">
        <button type="button" class="btn btn-primary btn-imgUpload" data-toggle="modal" data-target="#upload-Modal"><i class="icon icon-file-image"></i> 上传图片</button>
    </div>
    <div class="help-block">{$item.tip}</div>
    <div class="modal fade" id="upload-Modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title">单图上传</h4>
                </div>
                <div class="modal-body">

                    <div class="uploader">
                        <button type="button" class="btn btn-primary uploader-btn-browse">上传附件</button>
                        <div class="uploader-message">
                            <div class="content"></div>
                            <button type="button" class="close">×</button>
                        </div>
                        <div class="uploader-files">
                            <div class="file template">
                                <div class="file-box img-thumbnail">
                                    <div class="file-progress-bar"></div>
                                    <div class="file-size">0KB</div>
                                    <div class="file-icon"><i class="icon icon-file-image"></i></div>
                                    <div class="btn-delete-file"><i class="icon icon-remove-sign text-danger"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary btn-saveImg">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<style media="screen">
    .uploader .uploader-files {
        border: 2px dashed #e6e6e6;
        margin: 0;
        min-height: 160px;
    }
    .uploader .uploader-message{
        left: 80px;
        padding: 5px 12px;
    }
    .uploader .uploader-btn-browse {
        margin-bottom: 15px;
    }
    .uploader .uploader-files .file{
        display: inline-block;
        background: #fff;
    }
    .file-box{
      margin: 10px 5px;
      position: relative;
    }
    .file-box .btn-delete-file{
      position: absolute;
      top: -8px;
      right: -8px;
      cursor: pointer;
    }
    .file-box .btn-delete-file i{
      font-size: 20px;
    }
    .file-box .file-size{
      position: absolute;
      right: 20px;
      bottom: 20px;
      border-radius: 6px;
      text-align: center;
      padding: 0 6px;
      font-size: 11px;
      color: #fff;
      background: #000;
    }
    .file-box .file-icon{
        width: 120px;
        height: 120px;
        text-align: center;
        background: #fff;
    }
    .file-box .file-icon .file-icon-image{
        background-size: 100%;
    }
    .file-box .file-icon i{
        font-size: 30px;
        line-height: 120px;
    }
</style>
<script type="text/javascript">
    var imgArr = [],imgStr='',ids = $("input[name={$item.name}]").val();
    if (ids!='') {
        $.post('{:U("upload/getImginfo")}',{ids:ids},function(data){
            var options = {
                mime_types: [{
                    title: '图片',
                    extensions: 'jpg,jpeg,gif,png'
                }], // 只允许上传图片
                autoUpload: true,
                staticFiles: data,
                limitFilesCount: 1, //图片最大上传数量为1
                url: "{:U('upload/imgUpload')}", //  图片上传地址
                onFileUploaded: function(file) {
                    imgArr.push(file.remoteId);
                    imgStr = imgArr.join(",");
                    $(".btn-saveImg").click(function(){
                        $("input[name={$item.name}]").val(imgStr);
                        $('#upload-Modal').modal('hide')
                    });
                },
                deleteActionOnDone:function(file,doRemoveFile){

                }
            };
            $('.uploader').uploader(options);
        });
    }else {
        var options = {
            mime_types: [{
                title: '图片',
                extensions: 'jpg,jpeg,gif,png'
            }], // 只允许上传图片
            autoUpload: true,
            limitFilesCount: 1, //图片最大上传数量为1
            removeUploaded: true,
            url: "{:U('upload/imgUpload')}", //  图片上传地址
            onFileUploaded: function(file) {
                imgArr.push(file.remoteId);
                imgStr = imgArr.join(",");
                $(".btn-saveImg").click(function(){
                    $("input[name={$item.name}]").val(imgStr);
                    $('#upload-Modal').modal('hide')
                });
            },
            deleteActionOnDone:function(file,doRemoveFile){

            }
        };
        $('.uploader').uploader(options);
    }
</script>
